<template>
	<div id="addMoney">
		<van-nav-bar 
			title="充值" 
			fixed 
			placeholder 
			left-arrow
			@click-left="$router.back()"
		>
		</van-nav-bar>
		<div class="form">
			<div class="form-item">
				<div class="label">充值金额：</div>
				<input maxlength="3" type="text" v-model="formdata.addMoney">
			</div>
		</div>
		<div class="quest" @click="passwordPopup=true">确定</div>
		<van-popup 
			v-model="passwordPopup"
			position="bottom"
			close-icon="close"
			style="height:50%"
			round
		>
			<van-password-input
				v-model="formdata.password"
				length="6"
				:gutter="10"
			/>
			<van-number-keyboard
				theme="custom"
				v-model="formdata.password"
				:show="true"
				close-button-text="确认"
				@close="czYe"
			/>
		</van-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				formdata:{
					addMoney:"",
					password:""
				},
				passwordPopup:false
			}
		},
		methods:{
			async czYe(){
				const {addMoney} = this.formdata
				if(!addMoney){
					this.$dialog.alert({
						message:"充值金额不能为空",
						confirmButtonColor:"#25987D"
					})
					return 
				}
				if(isNaN(Number(addMoney))){
					this.$dialog.alert({
						message:"只能输入数字",
						confirmButtonColor:"#25987D"
					})
					return 
				}
				// 构造请求参数
				const queryParams={}
				for(let key in this.formdata){
					if(key=='password'){
						queryParams[key]=this.md5(this.formdata[key])
					}else {
						queryParams[key]=this.formdata[key]
					}
				}
				const res=await this.$store.dispatch("rechargeMoney",queryParams)
				this.passwordPopup=false //关闭密码弹窗
				this.formdata.password=""
				if(res==0){
					this.$dialog.alert({
						message:"充值成功",
						confirmButtonColor:"#25987D"
					}).then(()=>{
						this.formdata.addMoney=""
					})
				}else if(res==403){
					this.$dialog.alert({
						message:"支付密码错误，充值失败",
						confirmButtonColor:"#25987D"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "../../scss/GLOBAL.scss";
#addMoney {
	::v-deep {
		.van-nav-bar { 
			background-color: $themeColor;
			.van-nav-bar__title {
				color: #fff;
			}
			.van-icon {
				color: #fff;
			}
		}
	}
	.form {
		padding: 0 10px;
		.form-item {
			padding: 15px 0;
			display: flex;
			align-items: center;
			.label {

			}
			input {
				flex: 1;
				padding: 8px 20px;
				border-radius: 4px;
			}
		}
	}
	// 确定
	.quest {
		user-select: none;
		text-align: center;
		background-color: $themeColor;
		padding: 10px 0;
		color: #fff;
		border-radius: 4px;
		margin: 0 10px;
		&:active {
			background-color: darken($themeColor,5%);
		}
	}
}
</style>